{include file="include:header" /}
<body class="fixed-sidebar full-height-layout gray-bg" >
    <!-- 销售统计 -->
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">

              <h2>用户统计</h2>
            <ol class="breadcrumb">
                <li><a href="{:url('admin/Index/home')}">主页</a></li>
                <li><a href="#">统计图表</a></li>
                <li><strong>用户统计</strong></li>
            </ol>
        </div>
        <div class="col-sm-8">

        </div>
    </div>
    <!-- 销售统计 -->
    <div class="wrapper wrapper-content">
        <div class="panel panel-default">
            <div class="panel-heading">用户统计<font class="text-danger"></font></div>
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>项目</th>
                            <th>当年新增用户</th>
                            <th>当月新增用户</th>
                            <th>总用户</th>
                        </tr>
                    </thead>
                    <tbody> 
                        <tr>
                            <td>统计</td>
                            <td class="text-danger">{$count['count_n']}</td>
                            <td class="text-danger">{$count['count_y']}</td>
                            <td class="text-danger">{$count['count']}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 统计图表 -->
        <div class="panel panel-default">
            <div class="panel-body">
                <h3 id="ec-year-title" class="ec-title form-horizontal form-inline" style="display: inline-block">
                   {$betime}&nbsp;年
                    <select id="ec-month-select-ar" class="form-control" name="month">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>用户图表(年)

                </h3>
                <div id="ec-year" style="width:100%;height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <h3 id="ec-month-title" class="ec-title form-horizontal form-inline" style="display: inline-block">
                    &nbsp;{$betime}年 
                    <select id="ec-month-select" class="form-control" name="month">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>用户图表(月)
                </h3>
                <div id="ec-month" style="width:100%;height:400px;"></div>
            </div>
        </div>
    </div>

</body>
</html>
{include file="include:js" /}
<!-- 统计图表 -->
<script type="text/javascript">
    /*
     *  获取当前年月
     */
    var myDate = new Date();
    var nowYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    var nowMonth = myDate.getMonth();


    /*
     * 按年统计
     */
    var myChart = echarts.init(document.getElementById('ec-year'));
    // 显示标题，图例和空的坐标轴
          var option = {
                    title : {
                        text: ''
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['用户']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : []
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value}'
                            }
                        }
                    ],
                    series : [
                        {
                            name:'用户',
                            type:'line',
                            data:[]
                        }
                    ]
                };
        

    /*
     * 按月统计
     */
   
    var myChart_as = echarts.init(document.getElementById('ec-month'));
    // 显示标题，图例和空的坐标轴
          var option_as = {
                    title : {
                        text: ''
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['用户']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : []
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value}'
                            }
                        }
                    ],
                      series : [
                        {
                            name:'用户',
                            type:'line',
                            data:[]
                        }
                    ]
                };
        

         var  year_name      = '用户',
                year_name_as = '金额';
           myChart.setOption(option);
           myChart.showLoading(); 
           myChart_as.setOption(option_as); 
           myChart_as.showLoading(); 
           getChaxun(nowYear,year_name,year_name_as); 
           getChaxunAs(nowYear,year_name,year_name_as); 

            $('#ec-month-select').val(nowMonth+1);     
            $('#ec-month-select').change(function(){ 
                var iMonth = $(this).children('option:selected').val();
                 getChaxunAs(nowYear,year_name,year_name_as,iMonth); 
            }) 

            $('#ec-month-select-ar').val(nowMonth+1);     
            $('#ec-month-select-ar').change(function(){ 
                var iMonth = $(this).children('option:selected').val();
                 getChaxun(nowYear,year_name,year_name_as,iMonth); 
            }) 
    
    
           //年
           function getChaxun(a,year_name,year_name_as,luna){
                $.get(tp5_url+'ap/userChart',{age:a,luna:luna,state:1}).done(function (data) {
                    if(data.code == '10008'){
                            layer.msg(data.msg,{time: 1500});
                    }else{
                        myChart.hideLoading();
                        // 填入数据
                        myChart.setOption({
                            xAxis: {
                                data: data['data']['chars']
                            },
                            series: [
                                {
                                    name: year_name,
                                    data: data['data']['count'] 
                                }
                            ]
                        });
                    }        
                });
          };
             //月
           function getChaxunAs(a,year_name,year_name_as,luna){
                $.get(tp5_url+'ap/userChart',{age:a,luna:luna,state:2}).done(function (data) {
                    if(data.code == '10008'){
                            layer.msg(data.msg,{time: 1500});
                    }else{
                         myChart_as.hideLoading();
                        // 填入数据
                         myChart_as.setOption({
                            xAxis: {
                                data: data['data']['chars']
                            },
                            series: [
                                {
                                    name: year_name,
                                    data: data['data']['count'] 
                                }
                               
                            ]
                        });
                    }
                });
          }    


 

        
</script>